<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>主题化按钮 Theming buttons-JQUERY MOBILE 1.0正式版中文手册</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script>
 </script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/button/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
  <h1>主题化按钮 Theming buttons</h1>
  <div class="desc">
  <div>Jquery Mobile 内建了几套样式系统，给你定义样式时多种选择，在容器内添加一个按钮后，它就会自动应用他的容器使用的样式系统，使得按钮和页面看起来协调统一，像变色龙<br />
    所以放进一个样式主题为a系统（黑色主题）容器的按钮会自动应用a系统样式。如下为实例<br />
    a为黑，b为灰底蓝，c为灰底灰，d白底白色 ，e黄底黄色</div>
  </div>
<p class="indent"><strong>A主题</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_aa.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_aa.png">
<p class="indent"><strong>B主题</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_bb.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_bb.png">
<p class="indent"><strong>C主题</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_cc.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_cc.png">
<p class="indent"><strong>D主题</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_dd.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_dd.png">    
<p class="indent"><strong>E主题</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_ee.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_ee.png">  
    
    
    
  <h1>分配系统样式 Assigning theme swatches</h1>
  <div class="desc">
  <div>给按钮增加data-theme=&quot;字母&quot;属性，可以手动的给按钮添加样式，使得按钮不一定非要与父容器的样式相符</div>   
</div>

  <div class="code"> 
    <p> &lt;a href=&quot;index.html&quot; data-role=&quot;button&quot; data-theme=&quot;a&quot;&gt;Theme a&lt;/a&gt;</p>
</div>
<p class="indent"><strong>5个通过data-theme设定不同主题的按</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_d.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_d.png">

<p class="indent"><strong>A主题下的不同主题的按钮</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_a.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_a.png">
<p class="indent"><strong>B主题下的不同主题的按钮</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_b.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_b.png">
    <p class="indent"><strong>C主题下的不同主题的按钮</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_c.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_c.png">
    <p class="indent"><strong>D主题下的不同主题的按钮</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_d.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_d.png">
    <p class="indent"><strong>E主题下的不同主题的按钮</strong></p>
	<img src="../../images/Theming buttons/Theming buttons_e.png" tppabs="http://www.jqmapi.com/images/Theming%20buttons/Theming%20buttons_e.png">
</div>
</div>
<iframe id="iFrame1" width="160px" scrolling="no" frameborder="0" allowtransparency="true" src="../../adsense_r.html" tppabs="http://www.jqmapi.com/adsense_r.html" onload="this.height=iFrame1.document.body.scrollHeight" ></iframe>
</body>
</html>



